<template>
  <div>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 90%">

        <el-table-column
          align="center"
          prop="s_id"
          width="100px"
          label="场馆id">
        </el-table-column>

        <el-table-column
          align="center"
          prop="number"
          label="场馆">
        </el-table-column>

        <el-table-column
          align="center"
          prop="order"
          label="预约">
          <template slot-scope="scope">
            <el-button type="text" @click="openDialog(scope.row)">点击预约</el-button>
              <el-dialog title="预约信息" :visible.sync="dialogFormVisible">
                <el-form :model="reservation">

                  <el-form-item label="预约人:" :label-width="formLabelWidth">
                    {{msg}}
                  </el-form-item>

                  <el-form-item label="选择日期" :label-width="formLabelWidth">
                    <div class="block">
                      <el-date-picker
                        v-model="reservation.date"
                        type="date"
                        placeholder="选择日期">
                      </el-date-picker>
                    </div>
                  </el-form-item>

                  <el-form-item label="选择时间" :label-width="formLabelWidth">
                      <el-select v-model="reservation.time" placeholder="请选择时间">
                        <el-option
                          v-for="itemTime in optionsTime"
                          :key="itemTime.value"
                          :label="itemTime.label"
                          :value="itemTime.value">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="open">确 定</el-button>
                </div>
              </el-dialog>
          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex"
import Common from "../../utils/Common.vue";
export default {
    data() {
      return {
        msg:"",
        //dialogFormVisible:true,
        //提交表单的确定和取消键
        dialogTableVisible: false,
        dialogFormVisible: false,
        formLabelWidth: '80px',
        //日期选择
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();    
          },
        },
        date: '',
        dialogVisible: false,
        //get从后端获得数据，主要是number
        data:[{
          number: '',
          type:'',
          s_id:'',
        }],

        //整体样式
        tableData: [{
          s_id:'',
          number:'',
          order:''
        }],
        //选择时间
        optionsTime: [{
          value: '1',
          label: '09：00-12：00'
        }, {
          value: '2',
          label: '12：00-15：00'
        }, {
          value: '3',
          label: '15：00-18：00'
        }, {
          value: '4',
          label: '18：00-21：00'
        }],
        value: '',
      //post向后端发送数据
        reservation:{
          number: '',
          date:'',
          time:'',
          username:'',
          type:'羽毛球馆'
        }
      };
    },
  computed:{
    userName:{
        get(){
          return this.$store.state.username
        },
        set(val){
          this.$store.commit('username', val)
        }
    },
    Token:{
      get(){
          return this.$store.state.token
        },
        set(val){
          this.$store.commit('token', val)
        }
    }
    // ...mapState(["username"])
  },
    //刷新页面
    mounted() {
    this.getInit();
  },
    methods:{
      ...mapMutations(['username','token']),

      getInit() {
      console.log(this.$store.state.token);
      this.$axios({
        headers: {
                "token":this.$store.state.token,
                "username":this.$store.state.username,
              },
        method: "GET",
        url: Common.base_url + "/user/stadiums/羽毛球馆",
      })
        .then((res) => {
          console.log(res.data);
          console.log([res.data.data]);
          if(res.data.code==200){
            console.log("获取数据成功");
            this.tableData=res.data.data;
            this.reservation.number=res.data.data.number;
          }else if(res.data.code==500){
                this.$message({
                  message: res.data.message,
                  type: "error",
                })
              } 
          
        })
        .catch((error) => {
          console.log("数据获取失败");
        });
      },

      handleClose(done) {
        this.$router.push("/userBadminton");
      },
      openDialog(row){
        this.msg=this.$store.state.username;
        console.log(this.msg);
        this.reservation.username=this.msg;
        this.row = row;
        this.dialogFormVisible=true;
        this.reservation.number=this.row.number;
      },
      open() { 
        console.log(this.reservation)
        this.$axios({
              headers: {
                "Content-Type": "application/json", 
                "token":this.$store.state.token,
                "username":this.$store.state.username,
              },
              method: "POST",
              url: Common.base_url + "/user/reservations",
              transformRequest:[function(data){
                return JSON.stringify(data);
              }],
              data: this.reservation
            }).then((res) => {
              // 请求成功，代表与服务器建立连接,打印出post的数据
              console.log(res.data);
              if (res.data.code == 200 ) {
                console.log("请求成功！");
                this.$message({
                  message: "预定成功！",
                  type: "success",
                })
                this.dialogFormVisible=false;
              }else if(res.data.code==500){
                this.$message({
                  message: res.data.message,
                  type: "error",
                })
              }  
              else {
                // 登录失败，弹出提示
                console.log("请求失败！");
                this.$message({
                  message: "该时间已被预定！",
                  type: "error",
                })
              }
            }).catch((err)=>{
                  console.log("error")
                }
                )
      }
    }
  };
</script>
